<script setup>
// d3-cloud并非官方d3核心包，需要另外安装，比如 npm i d3-cloud
// 这里假设已安装，且支持ES模块环境

import { ref} from "vue";
const trendingList = ref([]);
const tid = ref(0);
const searchTrending = async (bvid) => {
  await router.push('/video/' + bvid);
};
import {getSeriesVideos} from "@/api/video.js";
import {onMounted} from "vue";
import router from "@/router/index.js";
//初始化
const initHotVideos = async () =>{
    try {
      const respond = await getSeriesVideos();
      const res = respond.data;
      trendingList.value = [];
      for (const item of res.data.slice(0, 10)){
        trendingList.value.push({
          title: item.title,
          bvid: item.bvid,
          view: item.view,
          like: item.like,
          coin: item.coin,
          share: item.share,
        })
      }

    } catch (error) {
      console.error('请求失败:', error);
    }
}
function formatNumber(num) {
  return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}
onMounted(async () => {
  await Promise.all([
    initHotVideos(),
  ])
});
</script>

<template>
  <div>
    <ul class="trending-list">
      <li
          class="trending-item"
          v-for="(trend, index) in trendingList"
          :key="index"
          @click="searchTrending(trend.bvid)"
      >
        <div class="trending-rank" :class="{ 'top-rank': index < 3 }">{{ index + 1 }}</div>
        <div class="trending-content">
          <div>{{ trend.title }}</div>
          <div class="trending-stats"><i class="fas fa-fire"></i>
            播放量: {{ formatNumber(trend.view) }}
            点赞：{{formatNumber(trend.like)}}
            硬币：{{formatNumber(trend.coin)}}
            转发：{{formatNumber(trend.share)}}
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>

<style scoped>
/* 热搜列表 */
.trending-list {
  list-style: none;
}
.top-text-row {
  display: flex;
  padding: 12px 0;
  border-bottom: 1px solid #eee;
  margin-bottom: 10px;
}
.text-group {
  margin-right: 20px;
  font-weight: bold;
  cursor: pointer;
  color: #FC9FB0;
}
.text-active-group {
  margin-right: 20px;
  font-weight: bold;
  cursor: pointer;
  color: #FB7299;
}
.trending-item {
  display: flex;
  align-items: center;
  padding: 14px 16px;
  border-radius: 12px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: var(--transition);
  background: #f8fbff;
}

.trending-item:hover {
  background: #edf3ff;
  transform: translateX(8px);
  box-shadow: 0 5px 15px rgba(67, 97, 238, 0.1);
}

.trending-rank {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: #eef2ff;
  border-radius: 50%;
  margin-right: 18px;
  font-weight: 700;
  color: var(--primary);
  font-size: 14px;
  transition: var(--transition);
}

.top-rank {
  background: linear-gradient(135deg, var(--accent), #ff6b9c);
  color: white;
}

.trending-content {
  flex: 1;
  font-size: 16px;
}

.trending-stats {
  color: var(--gray);
  font-size: 14px;
  margin-top: 5px;
  display: flex;
  align-items: center;
  gap: 5px;
}

.trending-stats i {
  color: var(--accent);
  font-size: 12px;
}

.trending-item:hover .trending-rank {
  transform: scale(1.15);
}
</style>